<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>添加灵活工位</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
</head>
<style>
::-webkit-scrollbar-thumb {
  background:#a2a2a2; 
  border-radius: 10px;
  height:50%;
}
::-webkit-scrollbar{width:6px;}
body{
	overflow-y: scroll;
} 
body{
	height: 100%;
	overflow-y:scroll;
}
</style>
<body>
<form class="layui-form" id="defaultForm" th:action="@{/app/contractPartition/save}" th:method="post" lay-filter="employee-form">
<input type="hidden" id="type" name="type" th:value="${type}"/>
<input type="hidden" id="fkContract" name="fkContract" th:value="${id}"/>
<input type="hidden" id="projectId" name="projectId" th:value="${projectId}"/>
<input type="hidden" id="date" name="date" th:value="${date}"/>
<input type="hidden" id="fengbiIds" name="fengbiIds" th:value="${fengbiIds}"/>
<input type="hidden" id="fkPartition" name="fkPartition" lay-verify="fkPartition"/>
	<div class="kb-form-container">
		<div style="width: 100%; height: 100%; position: relative;">
			<div class="clearfix mag-bot-20">
				<div class="area-status f-right flex">
					<div class="status-title flex-center"><span style="background-color: rgb(200, 200, 200);"></span><span>已占用</span></div>
					<div class="status-title flex-center"><span style="background-color: rgb(237, 102, 107);"></span><span>快到期</span></div>
					<div class="status-title flex-center"><span style="background-color: rgb(98, 168, 233);"></span><span>未到期</span></div>
				</div>
			</div>
			<div class="kb-row clearfix" id="par">
				<!-- <div class="area-block  area-block_hover flex-vcenter" style="background-color: rgb(243, 247, 249); color: rgb(98, 168, 233);">
					<div class="area-name t-over" style="max-width: 82px;">A001</div><span class="area-desk-num">剩余9个工位</span>
				</div>
				<div class="area-block  area-block_hover flex-vcenter" style="background-color: rgb(243, 247, 249); color: rgb(98, 168, 233);">
					<div class="area-name t-over" style="max-width: 82px;">A001</div><span class="area-desk-num">剩余9个工位</span>
				</div>
				<div class="area-block flex-vcenter " style="background-color: rgb(247, 247, 247); color: rgb(200, 200, 200);">
					<div class="area-name t-over" style="max-width: 82px;">金桥办公空间</div>
					<span class="area-desk-num">已占用</span>
				</div>
				<div class="area-block  area-block_hover flex-vcenter area-block_active" style="background-color: rgb(243, 247, 249); color: rgb(98, 168, 233);">
					<div class="area-name t-over" style="max-width: 82px;">A001</div><span class="area-desk-num">剩余9个工位</span>
				</div>
 -->
			</div>
			<div class="layui-form-item" style="padding:30px">
				<button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">提交</button>
		        <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
			</div>
		</div>	
	</div>
</form>
</body>
<script>
$(function(){
	var type=$("#type").val();
	getPartition();
	layui.use(['element',"layer","form"], function(){
		var layer=layui.layer,form = layui.form;			
			
		form.verify({
			fkPartition: function(value, item){ //value：表单的值、item：表单的DOM对象
	      	  if(value==""){
		       	  return '请选择一个分区不能为空';
		      }
		  }
		  
		});
		
		//监听提交
		form.on('submit(formEmployee)', function(data){
			$.post($("#defaultForm").attr('action'), data.field, function(result) {
				parent.layer.msg(result.msg);
				closeLayer();
			}, 'json');
			return false;
		});
		
	});
	
	function setHeight(){
        var h = document.body.clientHeight*1;
        window.parent.test(h);
    }
	
	
})
function getPartition(){
	var type=$("#type").val();
	var projectId = $("#projectId").val();
	var fkContract = $("#fkContract").val();
	var url="/app/projectPartition/listdata";
	jQuery.ajax({
        type:"post",
        async:false,
        url:url,
        dataType:"json",
        data:{'params[state]':type,'params[fkProject]':projectId,'params[fkContract]':fkContract},
        success:function(data){
        	partition(data.data);
        }
    })
}

function partition(data){
	var fengbiIds = $("#fengbiIds").val().split(",");//如果是封闭工位，已经选择的显示已占用
	var date = $("#date").val();
	var con="";
	for (var i = 0; i < data.length; i++) {
		if(data[i].partitionType == 2){
			var flag = -1;
			//封闭空间
			for(var j =0 ;j < fengbiIds.length;j++){
				if(fengbiIds[j] == data[i].id){
					con+='<div class="area-block flex-vcenter" style="background-color: rgb(247, 247, 247); color: rgb(200, 200, 200);" >'
						+'<div class="area-name t-over" style="max-width: 82px;">'+data[i].partitionName+'</div><span class="area-desk-num">已占用</span>'
						+'</div>';
					flag = 1;
				}
			}
			if(flag == -1){
				if(data[i].realEndDate >= date ||data[i].ratedNumber == 0){
					con+='<div class="area-block flex-vcenter" style="background-color: rgb(247, 247, 247); color: rgb(200, 200, 200);" >'
						+'<div class="area-name t-over" style="max-width: 82px;">'+data[i].partitionName+'</div><span class="area-desk-num">已占用</span>'
						+'</div>';
				}else{
					con+='<div class="area-block area-block_hover flex-vcenter" style="background-color: rgb(243, 247, 249); color: rgb(98, 168, 233);" onclick=setPartition(this,"'+data[i].id+'") >'
					+'<div class="area-name t-over" style="max-width: 82px;">'+data[i].partitionName+'</div><span class="area-desk-num">剩余'+data[i].ratedNumber+'个工位</span>'
					+'</div>';
				}
			}
			
		}else{
			var count = data[i].ratedNumber - data[i].yichuzu;
			if(data[i].realEndDate < date){
				count = data[i].ratedNumber;
			}
			if(count == 0){
				con+='<div class="area-block flex-vcenter" style="background-color: rgb(247, 247, 247); color: rgb(200, 200, 200);" >'
					+'<div class="area-name t-over" style="max-width: 82px;">'+data[i].partitionName+'</div><span class="area-desk-num">已占用</span>'
					+'</div>';
			}else{
				con+='<div class="area-block area-block_hover flex-vcenter" style="background-color: rgb(243, 247, 249); color: rgb(98, 168, 233);" onclick=setPartition(this,"'+data[i].id+'") >'
				+'<div class="area-name t-over" style="max-width: 82px;">'+data[i].partitionName+'</div><span class="area-desk-num">剩余'+count+'个工位</span>'
				+'</div>';
			}
		}
		
		
	}
	$("#par").html(con);
}
function setPartition(obj,id){
	$(obj).addClass('area-block_active').siblings("div").removeClass('area-block_active');
	$("#fkPartition").val(id);
}
</script>
</html>